<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <div class="box-ver-hor-between">
            <div class="primary-color">优惠配置</div>
            <div>
              <a-button type="primary" class="mr-20">
                批量导入
              </a-button>
              <a-button type="primary"  @click="handleAdd">
                新增优惠配置
              </a-button>
            </div>
          </div>
        </a-card>
      </a-col>
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam"
              @on-search ="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>

  </page-layout>
</template>

<script>

import { message , modal} from 'ant-design-vue';

import { page, remove } from '@/api/module/ta'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { reactive, createVNode, ref } from 'vue';
import { useRouter } from 'vue-router'

const removeKey = "remove";

export default {
  setup() {

    const tableRef = ref()

    const router = useRouter()

    const switchFormat = { yes: true, no: false, event: function(value,record){
        record.enable = !record.enable;
        return value;
      }}

    const columns = [
      {
        title: '优惠名称',
        dataIndex: 'name',
        width: '100',
        key: 'name'
      },
      {
        title: '优惠开始时间',
        dataIndex: 'level',
        width: '100',

      },
      {
        title: '优惠结束时间',
        dataIndex: 'school',
        width: '100',

      },
      {
        title: '优惠课程类型',
        dataIndex: 'major',
        width: '100',

      },
      {
        title: '优惠类型',
        dataIndex: 'sex',
        width: '100',
      },
      {
        title: '总价封顶金额',
        dataIndex: 'phone',
        width: '100',
      },
      {
        title: '优惠金额',
        dataIndex: 'email',
        width: '100',
      },
      {
        title: '状态',
        dataIndex: 'email',
        width: '100',
      },
      {
        title: '创建人',
        dataIndex: 'creat',
        width: '100',
      },
      {
        title: '创建时间',
        dataIndex: 'creatTiem',
        width: '100',
      },
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await page(param);
      return {
        data: response.data.record,
      };
    };

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: '您是否确定要删除此数据?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          message.loading({ content: "提交中...", key: removeKey });
          remove({"id":record.id}).then((response) => {
            if(response.success){
              message.success({content: "删除成功", key: removeKey, duration: 1}).then(()=>{
                tableRef.value.reload()
              })
            }else{
              message.error({content: "删除失败", key: removeKey, duration: 1})
            }
          })
        }
      });
    }

    /// 行操作
    const operate = [
      { label: "详情", event: function ({ id }) { router.push({
        path: '',
        query: { id: id}
      }) }},
      { label: "删除", event: function (record) { removeMethod(record) }},
    ];

    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
    })

    const searchParam = [
      { key: "taName", type: "input", label: "优惠名称", placeholder: '请输入'},
      { key: "type", type: "select", label: "优惠类型", options: [
        { text: '线下课程优惠', value: 1 },
        { text: '线上课程优惠', value: 2 },
      ], placeholder: '请选择'},
      { key: "subType", type: "select", label: "优惠课程类型", options: [
        { text: '时间段优惠', value: 1 },
        { text: '课程数优惠', value: 2 },
        { text: '总价封顶优惠', value: 3 },
      ], placeholder: '请选择'},
      { dataIndex:"createTime",
        key: "createTime",
        keys: ['statCreateTime', 'endCreateTime'],
        type: "rangeTime",
        label: "优惠时间",
        showTime: { format: 'HH:mm:ss'},
        format: 'YYYY:MM:DD HH:mm:ss',
        valueFormat: 'YYYY:MM:DD HH:mm:ss',
        placeholder: ['开始时间', '结束时间']
      },
      { key: "state", type: "select", label: "启用状态", options: [
        { text: '启用', value: 1 },
        { text: '禁用', value: 2 },
      ], placeholder: '请选择'},
    ]

    const search = function(value) {
      state.param = {
        taName: value.taName,
        taMajor: value.taMajor,
        schName: value.schName,
        statCreateTime: value.createTime?value.createTime[0]:'',
        endCreateTime: value.createTime?value.createTime[1]:'',
        createBy: value.createBy,
      }
      tableRef.value.reload()
    }
    const onReset = function() {
      state.param = {
        taName: '',
        taMajor: '',
        schName: '',
        statCreateTime: '',
        endCreateTime: '',
        createBy: '',
      }
      tableRef.value.reload()
    }

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeSave = function() {
      state.visibleSave = false
      tableRef.value.reload()
    }

    const closeEdit = function() {
      state.visibleEdit = false
      tableRef.value.reload()
    }

    const closeInfo = function() {
      state.visibleInfo = false
    }

    const handleAdd = () => router.push('/university/ta-manage/add')
    return {
      state,
      fetch,
      search,
      onReset,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,

      closeSave,
      closeEdit,
      closeInfo,

      handleAdd,
      tableRef
    };
  },
};
</script>
